<template>
  <div class="rightbox" v-cloak>
    <h1>公众号基本信息
    </h1>
    <div class="add-box" style="width:550px;">
      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item
          label="appid"
          prop="appid"
          :rules="[
            { required: true, message: '请输入appid', trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.appid"></el-input>
        </el-form-item>
        <el-form-item
          label="secret"
          prop="secret"
          :rules="[
            { required: true, message: '请输入secret', trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.secret"></el-input>
        </el-form-item>
        <el-form-item
          label="mchid"
          prop="mchid"
          :rules="[
            { required: true, message: '请输入mchid', trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.mchid"></el-input>
        </el-form-item>
        <el-form-item
          label="signkey"
          prop="signkey"
          :rules="[
            { required: true, message: '请输入signkey', trigger: 'blur' }
          ]"
        >
          <el-input v-model="form.signkey"></el-input>
        </el-form-item>
        <el-form-item
          label="cretificate"
          prop="cretificate"
          :rules="[
            { required: true, message: '请上传证书', trigger: 'blur' }
          ]"
        >
          <el-input type="file" accept=".p12" class="thumbnail" v-model="form.cretificate" style="width:350px;float:left;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit('form')">提交</el-button>
          <el-button @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import axios from 'axios'
// import qs from 'qs'
import $ from 'jquery'
export default {
  data () {
    return {
      form: {
        appid: '',
        secret: '',
        mchid: '',
        signkey: '',
        cretificate: ''
      }
    }
  },
  methods: {
    submit: function (form) {
      var that = this
      console.log(that.$pub.colorListLength)
      that.$pub.open()
      var formFile = new FormData()
      that.$refs[form].validate((valid) => {
        if (valid) {
          var cretificate = $('.thumbnail input').prop('files')[0]
          formFile.append('certificate', cretificate)
          formFile.append('appid', that.form.appid)
          formFile.append('secret', that.form.secret)
          formFile.append('mchid', that.form.mchid)
          formFile.append('signkey', that.form.signkey)
          $.ajax({
            type: 'post',
            url: '/gp/app/Modify',
            dataType: 'json',
            data: formFile,
            processData: false,
            contentType: false,
            success: function (data) {
              if (data.code === 0) {
                that.$alert('新增成功', '提示', {
                  confirmButtonText: '确定',
                  callback: action => {
                    that.resetForm(form)
                  }
                })
              } else {
                that.$pub.failcode(that, data.code, data.data)
              }
            },
            error: function (data) {
              that.$pub.catchbox(that)
            }
          })
        }
      })
    },
    resetForm (form) {
      this.$refs[form].resetFields()
    }
  },
  mounted () {
    // var that = this
    // this.getList()
    // console.log(global_.open())
    // console.log(that.form.colorListLength)
  }
}
</script>
